<template>
    <section>
        <!--卡牌-->
       <!-- <el-card class="box-card">
            <div v-for="item in infos" class="text item">
                <span v-if="item.name">{{item.name +' :  '+item.val}}</span>
            </div>
        </el-card>-->

        <!--列表-->
        <!--<el-table v-loading="listLoading" :data="tableData" border stripe style="width: 100%"
                  @selection-change="handleSelectionChange">
            &lt;!&ndash;<el-table-column prop="id" label="序号"></el-table-column>&ndash;&gt;
            <el-table-column label="Id">
                <template scope="scope">
                    <router-link :to="'/page313/'+scope.row.id">{{scope.row.otherinfo.applicationId}}</router-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="otherinfo.status"
                    label="状态">
            </el-table-column>
            <el-table-column label="开始时间">
                <template scope="scope">
                    <span>{{scope.row.otherinfo.startTime | timeChange}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="endDate"
                    label="结束时间">
                <template scope="scope">
                    <el-progress v-if="scope.row.status=='running'" :text-inside="true" :stroke-width="18"
                                 :percentage="70"></el-progress>
                    &lt;!&ndash;<span v-if="scope.row.status!='running'">{{scope.row.endDate}}</span>&ndash;&gt;
                    <span>{{scope.row.otherinfo.endTime | timeChange}}</span>
                    &lt;!&ndash;<el-button type="text" @click="viewLog(scope.row.id)">日志</el-button>&ndash;&gt;
                </template>
            </el-table-column>
            <el-table-column prop="date" label="持续时间(S)">
                <template scope="scope">
                    <span>
                        {{scope.row.otherinfo.endTime - scope.row.otherinfo.startTime}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button type="text" @click="toCGStart(scope.row)">{{scope.row.start | toReStop}}</el-button>
                </template>
            </el-table-column>
        </el-table>-->

        <!--分页-->
        <!--<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
            <el-pagination :current-page="1" :page-sizes="[5, 10, 20, 50]" :page-size="20" layout="total, sizes, prev, pager, next, jumper"
                           :total="400" style="float:right">
            </el-pagination>
        </el-col>-->

        <el-card class="box-card detail">
            <el-row :gutter="24">
                <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition">

                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" v-for="item in tableData">
                    <tr>
                        <td class="">Application ID</td>
                        <td>{{item.otherinfo.applicationId}}</td>
                    </tr>
                    <tr>
                        <td>ID</td>
                        <td>{{item.entity}}</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>{{item.primaryfilters.dagName[0]}}</td>
                    </tr>
                    <tr>
                        <td>Submitter</td>
                        <td>{{item.primaryfilters.user[0]}}</td>
                    </tr>
                    <tr>
                        <td>Status</td>
                        <td>{{item.otherinfo.status}}</td>
                    </tr>
                    <tr>
                        <td>Progress</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Start Time</td>
                        <td>{{item.otherinfo.startTime | timeChange}}</td>
                    </tr>
                    <tr>
                        <td>End Time</td>
                        <td>{{item.otherinfo.endTime | timeChange}}</td>
                    </tr>
                    <tr>
                        <td>Duration</td>
                        <td> {{item.otherinfo.timeTaken | duration}}</td>
                    </tr>
                    <tr>
                        <td>Log</td>
                        <td></td>
                    </tr>
                </table>
                </div>
            </el-row>
        </el-card>

    </section>
</template>

<script>
	import util from '../../common/util'
    import dao from '../../common/dao'

	export default {
      components: {},
      data() {
        return {
          start: true,
          logs: false,
          infos: [{
            name: "hiveId",
            val: "hive_01"
          }, {
            name: "sql条数",
            val: "4"
          }],
          tableData: [],
          query: {},
          parms:"",
          tableData:[]
        }
      },
      methods: {
        toCGStart: function (row) {
          //if(this.start==false) return false;
          let title = row.start == 1 ? "停止" : "重新启动";
          this.$confirm(`确认${title}吗?`, '提示', {
            //type: 'warning'
          }).then(() => {
            row.start = (row.start == '1') ? '0' : '1'
          }).catch(() => {

          });
        },
        viewLog: function (val) {
          this.logs = true
        },
        handleSelectionChange: function () {

        },
        changeStart: function (i) {
          this.tableData[i].start = this.tableData[i].start == '1' ? "0" : "1";
        },
        getTableData: function () {
          let arr = []
          for (let i = 0; i < 10; i++) {
            let obj = {
              id2: i,
              id: 'application_' + i,
              status: i == 0 ? 'running' : 'succeeded',
              startDate: '2014-1-1 12:00',
              endDate: '2014-1-1 12:3' + i,
              date: 30 + i + 'min',
              start: 0,
            };
            if (i == 0) obj.start = 1
            arr.push(obj)
          }
          this.tableData = arr
        },
        getHiveAppListHttp(){ //HIVE任务列表 请求

          dao.getHiveAppList({appId: this.query.task_real_id || ""}).then((response) => {
            if(response.FX.err) return false;
            let list = response.body.appInfo.entities[0];
            this.tableData = response.body.appInfo.entities;
            this.parms = list || "";
          })

        }

      },
      mounted: function () {

        this.query = this.$store.state.route.query || {};
        this.getHiveAppListHttp();

      }
	}
</script>

<style scoped>
	.box-card{
		margin-bottom: 15px;
	}
	.item{
		margin: 7px 0;
		width: 49%;
		display: inline-block;
	}
    .detail{
        width: auto;
    }

    .detail td {
        padding-left: 5px;
        padding-right: 5px;
    }
</style>